<template>
  <div>
    <div class="signBox">
      <p class="headerText">考务报名</p>
      <a-divider />
      <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" style="position:relative;left:0" @submit="handleSubmit">
        <a-form-item v-for="(item, index) in signUpList" :key="index">
          <div class="signBox-item">
            <div class="imgBox">
              <p>banner{{ item.id }}</p>
              <UploadGeneralImg v-model="item.imgUrl" :limit="1" :default-value="item.imgUrl" :cover="true" />
            </div>
            <a-form-item>
              <label>跳转链接：</label>
              <a-input v-model="item.link" placeholder="请输入" style="width:350px" />
            </a-form-item>
          </div>
        </a-form-item>
        <a-divider style="margin:0" />
        <a-form-model-item :wrapper-col="{ span: 2, offset: 22 }">
          <a-button type="primary" html-type="submit" style="margin-top:10px;margin-bottom:10px">
            保存
          </a-button>
        </a-form-model-item>
      </a-form>
    </div>
  </div>
</template>

<script>
import { getSignData, putSignData } from "@/api/news/sign";
import { UploadGeneralImg } from "xqjr-plugin-common";
export default {
  components: {
    UploadGeneralImg
  },

  data() {
    return {
      signUpList: []
    };
  },

  created() {
    this.init();
  },

  methods: {
    init() {
      getSignData()
        .then(res => {
          this.signUpList = res.data;
        })
        .catch(err => {
          console.log("debug log --> ", err);
        });
    },
    handleSubmit(e) {
      e.preventDefault();
      putSignData({ signUpUpdateDTOList: this.signUpList }).then(res => {
        this.$notification["success"]({
          message: "success",
          description: "保存成功"
        });
        this.init();
      });
    }
  }
};
</script>

<style scoped lang="scss">
//
.imgBox {
  width: 400px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  p {
    font-size: 18px;
  }
}
.headerText {
  margin-left: 47%;
  padding-top: 21px;
  font-size: 22px;
  font-weight: 600;
}
.signBox {
  margin-left: 0;
}
.xqjr-upload-wrapper {
  margin-top: 15px;
}
.signBox-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 60px;
  width: 900px;
}
</style>
